<template>
	<view class="container">
    <!-- 顶部搜索栏 -->
        <view class="search-box">
          <input type="text" placeholder="请输入加油站名称"  v-model="searchStationName"/>
		  <button @click="searchName">搜索</button>
          <view class="map-mode" @click="toMapMode">
            地图模式
          </view>
        </view>		
		
	<!-- 汽油型号 -->
  		<view class="oilType">
  		  <view class="label">汽油型号</view>
  		  <uni-data-select
		    v-model="value"
  		    :localdata="range"
  			placeholder="请选择汽油型号"
			clear="true"
  		  ></uni-data-select>
  		</view>
		
	    <view class="station-card" v-for="(item, index) in stations" :key="index"
		>
	      <!-- 加油站名称和距离 -->
	      <view class="header" @click="toDetail(index)" >
	        <text class="title">{{item.title}}</text>
	        <text class="distance">1056m</text>
	      </view>
	      
	      <!-- 优惠信息 -->
	      <view class="promotions" >
	        <view class="promo-tag"  v-for="(ite, ind) in promotions" :key="ind">{{ite.tag}}</view>
	      </view>
	      
	      <!-- 加油站图片 -->
	      <image class="station-image" 
		  src="/static/oil/竹莲加油站.png" 
		  mode="aspectFill" 
		  @click="toDetail(index)" ></image>
	      
	      <!-- 营业信息 -->
	      <view class="info-row">
	        <text>营业时间：周一至周六</text>
	      </view>
	<!-- 价格和地址行 -->
	      <view class="bottom-row">
	        <text class="price">¥ 5.76/升</text>
	        <view class="address">
	          <text @click="toDetail(index)" >{{item.address}}</text>
			  <image class="navigationImage"
			   src="/static/oil/navigationImage.png"
			   mode="aspectFill"
			   @click="openNavigation(index)"
			   ></image>
	        </view>
	      </view>
	    </view>	  				  
	</view>
</template>

<script>
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
	var qqmapsdk;	
	export default {
		data() {
			return {
			//搜索内容
			searchStationName:"加油站",	
			// 汽油型号
			value:1,
			range: [
			  { value: 0, text: "90#" },
			  { value: 1, text: "92#" },
			  { value: 3, text: "93#" },
			  { value: 4, text: "95#" },
			  { value: 5, text: "97#" },
			  { value: 6, text: "98#" }
			],
			// 加油站内容
			promotions:[{tag:"满200减20"},{tag:"满500减60"}], 
			stations: [] ,
		  }
		},
		methods: {
			// 点击搜索
		    searchName(){
			    console.log(this.searchStationName);
				this.getsuggest()
		    },
			//输入搜索得到附近相关地址
			getsuggest(){
				var _this = this;
				qqmapsdk.search({
					keyword:_this.searchStationName,
					success(res){
						console.log("成功");
						_this.stations=res.data;
						console.log(_this.stations);
					},
			        fail(error) {
						console.log("错误");
			            console.error(error);
			        },		  
				})
			},
		
			// 跳转到详情页面
			toDetail(index){
				// 使用定时器延时将数据发送
				// 第一种
				// setTimeout(()=>{
				// uni.$emit("station",this.stations[index])
				// }, 300);
				//  第二种
				uni.setStorageSync("station",this.stations[index])
				uni.navigateTo({
					url:"/pages/nearRefuel/detail/detail",
				})
			},
			
			// 打开导航
			openNavigation(index) {
			  const station = this.stations[index];
			  
			  uni.openLocation({
			    latitude: station.location.lat,
			    longitude: station.location.lng,
			    name: station.title,
			    address: station.address,
			    scale: 18
			  });
			},	
			
			// 跳转到地图模式
			toMapMode(){
				console.log("wwwwwwwwwwwwwwqqqqqqqqqqq========");
				console.log(this.stations);
				uni.redirectTo({
					url:"/pages/nearRefuel/mapMode/mapMode",
				})
			}
			
		},
		onLoad(){
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
			    key:"OFUBZ-SKY6H-2THDJ-WTCY3-GGQL3-DBFGN"
			});
			//进入时得到加油站附近相关地址
			this.getsuggest()
		}
	}
</script>

<style   scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.search-box input {
  flex: 1;
  height: 70rpx;
  background: #fff;
  border-radius: 35rpx;
  padding: 0 30rpx;
}

.search-box button {
  height: 60rpx;
  background: #fff;
  line-height: 60rpx;
  padding: 0 10rpx;
  background-color: #223fff;
  border-radius: 16rpx;
  font-size: 28rpx;
  margin-left: 6rpx;
}

.map-mode {
  margin-left: 20rpx;
  color: #fff;
  background: #ff6b00;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
    font-size: 20rpx;
}

.oilType {
  margin-bottom: 20rpx;
}

.oilType .label {
  margin-bottom: 10rpx;
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  background-color: rgb(106, 116, 255);
  text-align: center;
  border-radius: 8rpx;
 font-size: 36rpx;
}

.station-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.distance {
  color: #0066ff;
  font-size: 28rpx;
  margin-left: 80rpx;
}

.promotions {
  display: flex;
  gap: 10rpx;
  margin-bottom: 30rpx;
}

.promo-tag {
  background-color: #fff1f0;
  color: #ff6b6b;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

.station-image {
  width: 100%;
  height: 300rpx;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
}

.info-row {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 25rpx;
  margin-top: 25rpx;
}

.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #ff6b6b;
  font-size: 24rpx;
  font-weight: bold;
  padding: 0rpx,20rpx;
  width: 200rpx;
}

.address {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  margin-left: 40rpx;
 
}

.navigationImage {
  margin-left: 20rpx;
  height: 40rpx;
  width: 40rpx;
}
</style>
